<template>
  <div role="tabpanel" class="tab-pane active" id="home">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation">
        <router-link
          to="/home/message"
          aria-controls="Message"
          role="tab"
          data-toggle="tab"
          >Message</router-link
        >
      </li>
      <li role="presentation">
        <router-link
          to="/home/news"
          aria-controls="News"
          role="tab"
          data-toggle="tab"
          >News</router-link
        >
      </li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- 缓存组件 -->
      <h5 :style="{opacity:opacity}"> 学习Vue</h5>
      <keep-alive include="VueDemoNews"> 
        <router-view></router-view>
        </keep-alive>
    </div>
  </div>
</template>

<script>
export default {
  name: "VueDemoIndex",
  data() {
    return {
      opacity:1
    };
  },
  activated(){
    console.log("激活了Home");
   this.Timer=setInterval(()=>{

      console.log(1);
      this.opacity-=0.01
      if(this.opacity<=0){this.opacity=1}
    },20)
  },
  deactivated(){
      console.log("Home失效了");
      clearInterval(this.Timer)
  },
  methods: {},
};
</script>

<style scoped>
</style>